import {
  ProForm,
  ProFormCascader,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormMoney,
  ProFormSelect,
  ProFormText,
  ProFormTreeSelect,
  ProFormDatePicker,
  ProFormTextArea,
  ModalForm,
  ProFormInstance,
  ProCard,
  ProTable,
  ProDescriptions,
} from '@ant-design/pro-components';
import moment from 'moment';

const { Item } = ProDescriptions;
import ProLayout, {
  PageContainer,
  SettingDrawer,
  FooterToolbar,
} from '@ant-design/pro-layout';
import { history, useRequest } from 'umi';
import {
  EllipsisOutlined,
  PlusOutlined,
  CloudUploadOutlined,
  DownOutlined,
  InboxOutlined,
} from '@ant-design/icons';
import {
  message,
  Collapse,
  Button,
  Upload,
  Breadcrumb,
  Space,
  Modal,
} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { methods } from '@/utils/request';
import { useBoolean } from 'ahooks';
import type { UploadProps } from 'antd';
import { UploadOutlined, FileSearchOutlined } from '@ant-design/icons';
import TbaleExplainMap from '@/components/TipsMap';
import { TitleAdapter } from '../../commons/Adapter';

const { Panel } = Collapse;
const { Dragger } = Upload;
export default () => {
  const [dataSource, setDataSource] = useState<any>([]);
  const [gutter, setGutter] = useState(12);
  const addPersonFrom = useRef<ProFormInstance>();
  const [isExpand, { toggle }] = useBoolean(false);

  const [pageType, setPageType] = useState(
    history.location.pathname.replace(
      '/LabAchievements/ScientificResearch/HorizontalProject/EditHorizontalProject/',
      '',
    ),
  );

  const [filedDisable, setFiledDisable] = useState({
    userid: true,
    userJobLevel: true,
    userJobTitle: true,
    userType: true,
  });
  const [userListTabelFlag, setUserListTabelFlag] = useState<any>(false); //人员列表弹窗显示与否
  const [userListTabelData, setUserListTabelData] = useState<any>([]); //人员列表表格数据

  const [newpath, setNewPath] = useState();

  const [selectedUserListTabelData, setSelectedUserListTabelData] =
    useState<any>([]); //选中的人员列表数据，用于提交
  const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]); //默认全选
  const [formDataForSubmit, setFormDataForSubmit] = useState<any>(); //表单数据，用于提交
  const [yearFundDataTemp, setYearFoundDataTemp] = useState<any>([]); //年度金额表格缓存数据
  const [yearFundData, setYearFoundData] = useState<any>([]); //年度金额表格数据，用于提交
  const [yearVisible, setYearVisible] = useState(false); //

  const [updateStatus, setUpdateStatus] = useState(false);

  const [saveType, setSaveType] = useState(''); //modal 点击确认 调用新增、更新还是暂存接口
  const [allLabel, setAllLabel] = useState([]);
  const [formData, setFormData] = useState<any>();
  const formRef = useRef<ProFormInstance>();
  const editYearFormRef = useRef<ProFormInstance>();

  //获取全部项目标签，用于下拉框
  const getAllLabel = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/getAllLabel',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      onSuccess: (result, param) => {
        console.log(result);
        setAllLabel(result);
      },
    },
  );
  //添加标签
  const addLabelDetail = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/addLabelDetail',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      onSuccess: (result, params) => {
        console.log(result);
        getAllLabel.run();
        message.success('添加成功');
      },
      onError: (e, params) => {
        console.log(e);
        console.log(params);
      },
      // formatResult: res => res
      manual: true,
    },
  );

  const props: UploadProps = {
    name: 'file',
    action: 'http://10.1.40.84:9993/common/uploadFile',
    headers: {
      Authorization: localStorage.getItem('token') || '',
    },
    maxCount: 1,
    accept: '.docx,.doc,.pdf,.xls',
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        console.log(info?.file?.response?.code == 401);
        console.log(info);

        if (info?.file?.response?.code == 200) {
          formRef.current?.setFieldsValue({
            annexPath: info?.file?.response.data,
          });
          message.success(`${info.file.name} 上传成功！`);
        } else if (info?.file?.response?.code == 401) {
          message.error('用户登录过期请重新登陆！');
        } else {
          message.error(`${info.file.name} 上传失败`);
        }
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败！`);
      }
    },
  };

  //获取横向项目详细信息
  const getOneHoriProjDetail = useRequest(
    (data = null) => {
      return {
        url: `http://10.1.40.84:9998/project/getOneHoriProjDetail?id=${data}`,
        method: 'GET',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
      };
    },
    {
      onSuccess: (result, params) => {
        var temp = JSON.parse(JSON.stringify(result.yearList));
        temp.map((e: any) => {
          e.tableKey =
            e.year + '' + (e.yearFund + '') + Math.trunc(Math.random() * 100);
        });
        temp.sort((a: any, b: any) => {
          return parseInt(b.year || '0') - parseInt(a.year || '0');
        });
        setFormData(result);
        formRef.current?.setFieldsValue(result);
        setYearFoundDataTemp(temp);
        setYearFoundData(temp);
      },
      manual: true,
    },
  );

  //更改年度小表
  const updateYearFund = useRequest(
    (data = null) => {
      return {
        url: `http://10.1.40.84:9998/project/updateYearFund`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      onSuccess: (result, params) => {
        console.log(result);
        if (result.code === 200) {
          message.success(result.msg);
          getOneHoriProjDetail.run(pageType); //重新拉取信息
          setYearVisible(false); //关闭弹窗
        } else {
          message.error(result.msg);
        }
      },
      manual: true,
      formatResult: (res) => res,
    },
  );

  //修改横向项目
  const updateHoriProj = useRequest(
    (data = null) => {
      return {
        url: `http://10.1.40.84:9998/project/updateHoriProj`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: data,
      };
    },
    {
      onSuccess: (result, params) => {
        console.log(result);
        if (result.code === 200) {
          history.push('/LabAchievements/ScientificResearch/HorizontalProject');
          message.success(result.msg);
        } else {
          message.error(result.msg);
        }
      },
      manual: true,
      formatResult: (res) => res,
    },
  );

  //新建横向项目
  const insertNewHoriProj = useRequest(
    (data = null) => {
      return {
        url: `http://10.1.40.84:9998/project/insertNewHoriProj`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      onSuccess: (result, params) => {
        if (result.code === 200) {
          history.push('/LabAchievements/ScientificResearch/HorizontalProject');
        } else {
          message.error(result.msg);
        }
      },
      formatResult: (res) => res,
      manual: true,
    },
  );

  //暂存横向项目
  const insertTempHoriProj = useRequest(
    (data = null) => {
      return {
        url: `http://10.1.40.84:9998/project/insertTempHoriProj`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      onSuccess: (result, params) => {
        history.push('/LabAchievements/ScientificResearch/HorizontalProject');
        message.info(result.msg);
      },
      manual: true,
      formatResult: (res) => res,
    },
  );

  const updateStatusIpi = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/common/updateStatus',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  //根据人员字符串返回人员详情
  const getUserList = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/user/getUserList',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      onSuccess: (result, params) => {
        if (result) {
          setUserListTabelData(result);
          setSelectedUserListTabelData(result);
          setUserListTabelFlag(true);
          var temp: any = [];
          result.map((e: any) => {
            temp.push(e.webId);
          });
          setSelectedRowKeys(temp);
        }
      },
      manual: true,
    },
  );

  //人员列表表头
  const columns: any = [
    {
      title: '工号',
      key: 'username',
      dataIndex: 'username',
    },
    {
      title: '姓名',
      key: 'realName',
      dataIndex: 'realName',
    },
    {
      title: '人员类型',
      dataIndex: 'userType',
      key: 'userType',
    },
  ];
  //表单年度金额表头
  const columnsYearFoundForm: any = [
    {
      title: '年度',
      key: 'year',
      dataIndex: 'year',
      align: 'center',
    },
    {
      title: '到校款金额(万元)',
      key: 'yearFund',
      dataIndex: 'yearFund',
      align: 'center',
    },
    {
      title: '操作',
      key: 'edit',
      align: 'center',
      // hideInTable: localStorage.getItem('isEdit') === '查看',
      width: 150,
      render: (_: any, record: any) => {
        return (
          <Space>
            <ModalForm
              title={'编辑年度到校金额'}
              formRef={editYearFormRef}
              trigger={<Button type="link">编辑</Button>}
              onFinish={async (values) => {
                var temp = yearFundData.filter((e: any) => {
                  return e.tableKey != record.tableKey;
                });
                temp.push({
                  ...values,
                  tableKey:
                    values.year +
                    '' +
                    (values.yearFund + '') +
                    Math.trunc(Math.random() * 100),
                });
                temp.sort((a: any, b: any) => {
                  return parseInt(b.year || '0') - parseInt(a.year || '0');
                });
                setYearFoundData(temp);
                return true;
              }}
              request={() => {
                return record;
              }}
              modalProps={{
                destroyOnClose: true,
              }}
              grid
              width={'20%'}
            >
              <ProFormDatePicker.Year
                name={'year'}
                label={'年度'}
                rules={[{ required: true, message: '请输入' }]}
                disabled
              />
              <ProFormDigit
                name={'yearFund'}
                label={'到校款金额(万元)'}
                rules={[{ required: true, message: '请输入' }]}
              />
            </ModalForm>
            {/* <Button
              type="link"
              onClick={() => {
                var temp = yearFundData.filter((e: any) => {
                  return e.tableKey != record.tableKey;
                });
                setYearFoundData(temp);
              }}
            >
              删除
            </Button> */}
          </Space>
        );
      },
    },
  ];

  //列表年度金额表头
  const columnsYearFoundList: any = [
    {
      title: '年度',
      key: 'year',
      dataIndex: 'year',
      align: 'center',
    },
    {
      title: '到校款金额(万元)',
      key: 'yearFund',
      dataIndex: 'yearFund',
      align: 'center',
    },
    {
      title: '操作',
      key: 'edit',
      align: 'center',
      // hideInTable: localStorage.getItem('isEdit') === '查看',
      width: 150,
      render: (_: any, record: any) => {
        return (
          <Space>
            <ModalForm
              title={'编辑年度到校金额'}
              formRef={editYearFormRef}
              trigger={<Button type="link">编辑</Button>}
              onFinish={async (values) => {
                var temp = yearFundData.filter((e: any) => {
                  return e.tableKey != record.tableKey;
                });
                temp.push({
                  ...values,
                  tableKey:
                    values.year +
                    '' +
                    (values.yearFund + '') +
                    Math.trunc(Math.random() * 100),
                });
                temp.sort((a: any, b: any) => {
                  return parseInt(b.year || '0') - parseInt(a.year || '0');
                });
                setYearFoundData(temp);
                return true;
              }}
              request={() => {
                return record;
              }}
              modalProps={{
                destroyOnClose: true,
              }}
              grid
              width={'20%'}
            >
              <ProFormDatePicker.Year
                name={'year'}
                label={'年度'}
                rules={[{ required: true, message: '请输入' }]}
                disabled
              />
              <ProFormDigit
                name={'yearFund'}
                label={'到校款金额(万元)'}
                rules={[{ required: true, message: '请输入' }]}
              />
            </ModalForm>
            {/* <Button
              type="link"
              onClick={() => {
                var temp = yearFundData.filter((e: any) => {
                  return e.tableKey != record.tableKey;
                });
                setYearFoundData(temp);
              }}
            >
              删除
            </Button> */}
          </Space>
        );
      },
    },
  ];

  //新建项目提交
  const insertSubmit = () => {
    var userListTemp: any = [];
    selectedUserListTabelData.map((e: any) => {
      var temp = {
        userid: e.username,
        username: e.realName,
        userrank: e.userrank,
        usertype: e.usertype,
        userindentify: e.userindentify,
        userjobtitle: e.technicalName,
        userjoblevel: e.technicalGrade,
      };
      userListTemp.push(temp);
    });
    insertNewHoriProj.run({
      ...formDataForSubmit,
      timeList: [
        moment(formDataForSubmit.timeList[0]).format('YYYY-MM-DD'),
        moment(formDataForSubmit.timeList[1]).format('YYYY-MM-DD'),
      ],
      userList: userListTemp,
      projectYearList: yearFundData,
    });
  };

  //更新项目提交
  const updateSubmit = () => {
    var userListTemp: any = [];
    selectedUserListTabelData.map((e: any) => {
      var temp = {
        userid: e.username,
        username: e.realName,
        userrank: e.userrank,
        usertype: e.usertype,
        userindentify: e.userindentify,
        userjobtitle: e.technicalName,
        userjoblevel: e.technicalGrade,
      };
      userListTemp.push(temp);
    });
    updateHoriProj.run({
      ...formDataForSubmit,
      timeList: [
        moment(formDataForSubmit.timeList[0]).format('YYYY-MM-DD'),
        moment(formDataForSubmit.timeList[1]).format('YYYY-MM-DD'),
      ],
      userList: userListTemp,
      projectYearList: yearFundData,
    });
  };

  //暂存项目提交
  const tempSubmit = () => {
    var temp = formRef.current?.getFieldsValue(true);
    temp = { ...temp, projectYearList: yearFundData };
    console.log(temp.timeList);
    if (temp.timeList && temp.timeList[0] && temp.timeList[1]) {
      temp.timeList = [
        moment(temp.timeList[0]).format('YYYY-MM-DD'),
        moment(temp.timeList[1]).format('YYYY-MM-DD'),
      ];
    }
    if (selectedUserListTabelData?.length) {
      var userListTemp: any = [];
      selectedUserListTabelData.map((e: any) => {
        var temp = {
          userid: e.username,
          username: e.realName,
          userrank: e.userrank,
          usertype: e.usertype,
          userindentify: e.userindentify,
          userjobtitle: e.technicalName,
          userjoblevel: e.technicalGrade,
        };
        userListTemp.push(temp);
      });
      temp.userList = userListTemp;
    }

    console.log(temp);
    insertTempHoriProj.run(temp);
  };

  //根据时间区间生成年度小表
  const createYearFoundTable = () => {
    const timeString2Int = (timeString: any) => {
      return parseInt(moment(timeString).format('YYYY'));
    };
    var tableDataTemp = JSON.parse(JSON.stringify(yearFundData));
    var startTime = timeString2Int(
      formRef.current?.getFieldValue('timeList')[0],
    );
    var endTime = timeString2Int(formRef.current?.getFieldValue('timeList')[1]);
    var temp: any;
    var tempList: any = [];
    for (var i = endTime; i >= startTime; i--) {
      temp = {
        year: i + '',
        yearFund: 0,
        tableKey: i + '0' + Math.trunc(Math.random() * 100),
      };
      tableDataTemp.map((e: any) => {
        if (e.year === i + '') {
          temp = e;
        }
      });
      tempList.push(temp);
    }
    setYearFoundData(tempList);
  };

  useEffect(() => {
    if (pageType != 'new') {
      getOneHoriProjDetail.run(pageType);
    }
  }, []);

  return (
    <PageContainer
      header={{
        title: getOneHoriProjDetail?.data?.message ? (
          <div style={{ fontSize: 14, textAlign: 'center', color: 'red' }}>
            拒绝原因：{getOneHoriProjDetail?.data?.message}
          </div>
        ) : null,
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>科学研究</Breadcrumb.Item>
            <Breadcrumb.Item>横向项目</Breadcrumb.Item>
            <Breadcrumb.Item>
              {TitleAdapter(
                pageType,
                localStorage.getItem('isEdit'),
                '横向项目',
              )}
            </Breadcrumb.Item>
          </Breadcrumb>
        ),
      }}
      extra={
        <div>
          {localStorage.getItem('isEdit') === '审核' ? (
            <Space>
              <ModalForm
                title="拒绝"
                trigger={<Button key="2">返回成员修改</Button>}
                autoFocusFirstInput
                modalProps={{
                  onCancel: () => console.log('run'),
                  destroyOnClose: true,
                }}
                submitTimeout={2000}
                onFinish={async (values) => {
                  console.log(values);
                  updateStatusIpi
                    .run({
                      tableName: 'HORIZONTAL_PROJECT',
                      ids: [pageType],
                      status: 3, //拒绝
                      message: values.message,
                      tab: '子方向视角',
                    })
                    .then(() => {
                      getOneHoriProjDetail.run(pageType).then((e) => {
                        formRef.current?.setFieldsValue(e);
                        setNewPath(e?.annexPath);
                      });
                      history.goBack();
                      message.success('操作成功');
                    });
                  return true;
                }}
                grid={true}
                initialValues={{ message: getOneHoriProjDetail?.data?.message }}
              >
                <ProForm.Group>
                  <ProFormText
                    name="message"
                    label="拒绝原因"
                    placeholder="请输入拒绝原因"
                    colProps={{ span: 24 }}
                    rules={[{ required: true, message: '请输入拒绝原因' }]}
                  />
                </ProForm.Group>
              </ModalForm>
              <Button
                key="1"
                type="primary"
                onClick={() => {
                  updateStatusIpi
                    .run({
                      tableName: 'HORIZONTAL_PROJECT',
                      ids: [pageType],
                      status: 2, //审核通过
                      tab: '子方向视角',
                    })
                    .then(() => {
                      getOneHoriProjDetail.run(pageType).then((e) => {
                        formRef.current?.setFieldsValue(e);
                        setNewPath(e?.annexPath);
                      });
                      history.goBack();
                      message.success('操作成功');
                    });
                }}
              >
                提交管理员审核
              </Button>
            </Space>
          ) : null}
        </div>
      }
      content={
        <>
          {localStorage.getItem('isEdit') === '查看' ? (
            formData ? (
              <ProCard>
                <ProDescriptions
                  column={4}
                  request={async () => {
                    return Promise.resolve({
                      success: true,
                      data: formData,
                    });
                  }}
                  bordered
                  labelStyle={{ width: 170 }}
                >
                  <Item
                    label={'序号'}
                    dataIndex={'seq'}
                    hideInDescriptions={
                      localStorage.getItem('identity') !== '管理员'
                    }
                    span={4}
                  />

                  <Item label={'项目编号'} dataIndex={'projectId'} span={2} />
                  <Item label={'项目名称'} dataIndex={'projectName'} span={2} />
                  <Item label={'负责人'} dataIndex={'director'} span={2} />
                  <Item
                    label={'任务来源'}
                    dataIndex={'projectSource'}
                    tooltip={'委托单位名称'}
                    span={2}
                  />
                  <Item
                    label={'实验室人员'}
                    dataIndex={'labUser'}
                    span={2}
                    hideInDescriptions={
                      localStorage.getItem('identity') !== '管理员'
                    }
                  />
                  <Item
                    label={'学生及非本室人员'}
                    dataIndex={'stuAndOutUser'}
                    span={2}
                    hideInDescriptions={
                      localStorage.getItem('identity') !== '管理员'
                    }
                  />
                  <Item
                    label={'项目开始时间'}
                    dataIndex={'startTime'}
                    valueType={'dateMonth'}
                    span={2}
                  />
                  <Item
                    label={'项目结束时间'}
                    dataIndex={'endTime'}
                    valueType={'dateMonth'}
                    span={2}
                  />
                  <Item
                    label={'项目状态'}
                    dataIndex={'projectState'}
                    hideInDescriptions={
                      localStorage.getItem('identity') !== '管理员'
                    }
                    span={2}
                  />
                  <Item label={'项目总经费(万元)'} span={2}>
                    {
                      <>
                        {formData.totalFund}
                        <Button
                          type="link"
                          onClick={() => {
                            setYearFoundData(yearFundDataTemp);
                            setYearVisible(true);
                          }}
                        >
                          查看详情
                        </Button>
                      </>
                    }
                  </Item>
                  <Item label={'佐证材料'} span={2}>
                    {formData.annexPath ? (
                      <Button
                        type="link"
                        onClick={() => {
                          window.open(formData.annexPath);
                        }}
                      >
                        {' '}
                        查看材料
                      </Button>
                    ) : (
                      '暂无材料'
                    )}
                  </Item>
                  <Item
                    label={'项目标签'}
                    dataIndex={'labelList'}
                    span={2}
                    request={async () => {
                      return allLabel;
                    }}
                    hideInDescriptions={
                      localStorage.getItem('identity') !== '管理员'
                    }
                  />
                </ProDescriptions>
              </ProCard>
            ) : (
              ''
            )
          ) : (
            <>
              <ProForm
                grid={true}
                layout="vertical"
                formRef={formRef}
                onFinish={async (values) => {
                  console.log(values);
                  if (!values?.annexPath) {
                    message.warning('请上传材料！');
                  } else {
                    if (pageType == 'new') {
                      setSaveType('新增');
                    } else {
                      setSaveType('更新');
                    }
                    setFormDataForSubmit(values);
                    getUserList.run({ userList: values.director });
                  }
                }}
                autoFocusFirstInput
                submitter={{
                  render: (props, dom) => (
                    <FooterToolbar>
                      {localStorage.getItem('isEdit') === '审核' ? null : (
                        <>
                          {pageType === 'new' ||
                          getOneHoriProjDetail?.data?.isPass + '' === '-1' ? (
                            <Button
                              onClick={() => {
                                setSaveType('暂存');
                                let values = props.form?.getFieldsValue();
                                if (values.director) {
                                  getUserList
                                    .run({ userList: values.director })
                                    .catch((e) =>
                                      message.error('作者填写有误'),
                                    );
                                } else {
                                  tempSubmit();
                                }
                              }}
                            >
                              暂存
                            </Button>
                          ) : null}
                          <Button type="primary" htmlType="submit">
                            提交
                          </Button>
                        </>
                      )}
                    </FooterToolbar>
                  ),
                }}
              >
                <ProFormText
                  name={'annexPath'}
                  label={'佐证材料地址'}
                  colProps={{ span: 10 }}
                  hidden
                />
                <ProFormSelect
                  name={'isPass'}
                  label={'审核状态'}
                  colProps={{ span: 6 }}
                  placeholder="待审核"
                  options={[
                    {
                      value: '0',
                      label: '缺失附件',
                    },
                    {
                      value: '1',
                      label: '审核中',
                    },
                    {
                      value: '2',
                      label: '审核通过',
                    },
                    {
                      value: '3',
                      label: '审核失败',
                    },
                  ]}
                  disabled
                  hidden
                />
                <ProFormText
                  name={'annexState'}
                  label={'佐证材料状态'}
                  colProps={{ span: 6 }}
                  hidden
                />
                <ProFormDigit name={'id'} label={'编号'} hidden />

                <ProForm.Group
                  title="基本信息"
                  rowProps={{ gutter: gutter }}
                  colProps={{}}
                >
                  <ProFormText
                    name={'seq'}
                    label={'序号'}
                    disabled
                    hidden={true}
                    colProps={{
                      span:
                        localStorage.getItem('identity') !== '管理员' ? 0 : 4,
                    }}
                  />
                  <ProFormText
                    name={'projectName'}
                    label={'项目名称'}
                    colProps={{ span: 5 }}
                    rules={[{ required: true, message: '请输入' }]}
                  />
                  <ProFormText
                    name={'director'}
                    label={'负责人'}
                    colProps={{ span: 5 }}
                    rules={[{ required: true, message: '请输入' }]}
                  />
                </ProForm.Group>
                {/* <Collapse
                  style={{ width: '100%', marginBottom: 10 }}
                  bordered={false}
                  defaultActiveKey={['1']}
                >
                  <Panel header="详细内容" key="1" forceRender={true}> */}
                <ProForm.Group title="详细内容">
                  <ProFormText
                    name={'projectId'}
                    label={'项目编号(如没有编号，可填协议的具体日期)'}
                    colProps={{ span: 5 }}
                    rules={[{ required: true, message: '请输入' }]}
                  />
                  <ProFormText
                    name={'projectSource'}
                    label={'任务来源(委托单位名称)'}
                    colProps={{ span: 5 }}
                    rules={[{ required: true, message: '请输入' }]}
                  />
                </ProForm.Group>
                <ProForm.Group>
                  <ProFormText
                    name={'projectState'}
                    label={'项目状态'}
                    colProps={{ span: 5 }}
                    placeholder={''}
                    disabled
                    hidden={true}
                  />
                  <ProFormText
                    name={'labUser'}
                    label={'实验室人员'}
                    colProps={{ span: 5 }}
                    // rules={[{ required: true, message: '请输入' }]}
                    hidden={localStorage.getItem('identity') !== '管理员'}
                  />
                  <ProFormText
                    name={'stuAndOutUser'}
                    label={'学生及非本室人员'}
                    colProps={{ span: 5 }}
                    hidden={localStorage.getItem('identity') !== '管理员'}
                    // rules={[{ required: true, message: '请输入' }]}
                  />
                  <ProForm.Group title="经费及时限">
                    <ProFormDigit
                      name={'totalFund'}
                      label={'项目总经费(万元)'}
                      colProps={{ span: 5 }}
                      rules={[{ required: true, message: '请输入' }]}
                    />
                    <ProFormDateRangePicker
                      name={'timeList'}
                      label={'项目起止时间'}
                      // dataFormat={"dateRange"}
                      fieldProps={{
                        picker: 'month',
                        format: 'YYYY-MM',
                        onOpenChange: (open) => {
                          if (
                            !open &&
                            formRef?.current?.getFieldValue('timeList')
                          ) {
                            createYearFoundTable();
                          }
                        },
                      }}
                      colProps={{ span: 5 }}
                      rules={[{ required: true, message: '请输入' }]}
                    />
                  </ProForm.Group>
                  <ProForm.Group colProps={{ span: 10 }}>
                    <ProCard
                      bordered
                      title={<div style={{ width: '100%' }}>年度到校金额</div>}
                      // extra={
                      //   <ModalForm
                      //     trigger={<Button type={'link'}> 新增到校款</Button>}
                      //     onFinish={async (values) => {
                      //       var temp = JSON.parse(JSON.stringify(yearFundData));
                      //       temp.push({
                      //         ...values,
                      //         tableKey:
                      //           values.year +
                      //           '' +
                      //           (values.yearFund + '') +
                      //           Math.trunc(Math.random() * 100),
                      //       });
                      //       setYearFoundData(temp);
                      //       return true;
                      //     }}
                      //     width={'20%'}
                      //     grid
                      //     modalProps={{
                      //       destroyOnClose: true,
                      //     }}
                      //     title={'新增到校款'}
                      //   >
                      //     <ProFormDatePicker.Year
                      //       name={'year'}
                      //       label={'年度'}
                      //       rules={[{ required: true, message: '请输入' }]}
                      //     />
                      //     <ProFormDigit
                      //       name={'yearFund'}
                      //       label={'到校款金额(万元)'}
                      //       rules={[{ required: true, message: '请输入' }]}
                      //     />
                      //   </ModalForm>
                      // }
                    >
                      <ProTable
                        columns={columnsYearFoundForm}
                        dataSource={yearFundData}
                        search={false}
                        size={'small'}
                        rowKey={'tableKey'}
                        toolBarRender={false}
                        pagination={false}
                      ></ProTable>
                    </ProCard>
                  </ProForm.Group>
                  <ProForm.Group title="佐证材料">
                    <ProFormSelect
                      name={'labelList'}
                      label={'项目标签'}
                      mode={'multiple'}
                      hidden={localStorage.getItem('identity') !== '管理员'}
                      colProps={{ span: 5 }}
                      options={getAllLabel.data}
                      addonAfter={
                        <ModalForm<{
                          year: string;
                          labelName: string;
                        }>
                          title="新增标签"
                          trigger={<a>新增标签</a>}
                          autoFocusFirstInput
                          modalProps={{
                            onCancel: () => console.log('run'),
                          }}
                          submitTimeout={2000}
                          onFinish={async (values) => {
                            addLabelDetail.run(values);
                            return true;
                          }}
                        >
                          <ProForm.Group>
                            <ProFormDatePicker.Year
                              width="md"
                              name="year"
                              label="标签年份"
                              required
                            />
                            <ProFormText
                              width="md"
                              name="labelName"
                              label="标签名称"
                              required
                            />
                          </ProForm.Group>
                        </ModalForm>
                      }
                    />
                    <div
                      style={{
                        width: '200px',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}
                    >
                      <ModalForm
                        title="上传材料"
                        trigger={
                          <Button icon={<UploadOutlined />} type="link">
                            上传材料(上传盖章版合同)
                          </Button>
                        }
                        autoFocusFirstInput
                        submitTimeout={2000}
                        onFinish={async (values) => true}
                      >
                        {/* TbaleExplainMap['STANDARD'] 要修改 */}
                        <ProCard title={'上传盖章版合同'}>
                          {/* 有小问题，需要修改成pro的dragger */}
                          <Dragger {...props} maxCount={1}>
                            <p className="ant-upload-drag-icon">
                              <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">
                              单击或拖动文件到此区域进行上传
                            </p>
                            <p className="ant-upload-hint">请上传一个文件</p>
                          </Dragger>
                        </ProCard>
                      </ModalForm>
                      <Button
                        type="link"
                        onClick={() => {
                          formRef.current?.getFieldValue('annexPath')
                            ? window.open(
                                formRef.current?.getFieldValue('annexPath'),
                              )
                            : message.info('请上传材料');
                        }}
                        icon={<FileSearchOutlined />}
                      >
                        查看材料
                      </Button>
                    </div>
                  </ProForm.Group>
                </ProForm.Group>
                {/* </Panel>
                </Collapse> */}
              </ProForm>
            </>
          )}
        </>
      }
    >
      <Modal
        visible={userListTabelFlag}
        onOk={() => {
          console.log(selectedUserListTabelData);
          switch (saveType) {
            case '新增':
              insertSubmit();
              break;
            case '更新':
              updateSubmit();
              break;
            case '暂存':
              tempSubmit();
              break;
          }
          setUserListTabelFlag(false);
        }}
        onCancel={() => setUserListTabelFlag(false)}
        title="请确认人员！"
      >
        <ProTable
          rowKey={'webId'}
          columns={columns}
          search={false}
          dataSource={userListTabelData}
          toolBarRender={false}
          rowSelection={{
            onChange: (selectedRowKeys, selectedRows) => {
              setSelectedUserListTabelData(selectedRows);
              setSelectedRowKeys(selectedRowKeys);
            },
            selectedRowKeys: selectedRowKeys,
          }}
          tableAlertRender={false}
          pagination={false}
        />
      </Modal>

      <Modal
        visible={yearVisible}
        footer={
          <Space>
            <Button
              type={'primary'}
              onClick={() => {
                setYearVisible(false);
              }}
            >
              取消
            </Button>
            <Button
              type={'primary'}
              onClick={() => {
                updateYearFund.run({
                  tableName: 'HORIZONTAL_PROJECT',
                  itemId: parseInt(pageType),
                  pyList: yearFundData,
                });
              }}
            >
              提交
            </Button>
          </Space>
        }
        onCancel={() => setYearVisible(false)}
        title={
          <Space>
            <>{'年度到校金额'}</>
            <>{'  '}</>
            {/* <ModalForm
              title={'新增到校款'}
              trigger={<Button type={'primary'}> 新增到校款</Button>}
              onFinish={async (values) => {
                var temp = JSON.parse(JSON.stringify(yearFundData));
                temp.push({
                  ...values,
                  tableKey:
                    values.year +
                    '' +
                    (values.yearFund + '') +
                    Math.trunc(Math.random() * 100),
                });
                setYearFoundData(temp);
                return true;
              }}
              width={'20%'}
              grid
              modalProps={{
                destroyOnClose: true,
              }}
            >
              <ProFormDatePicker.Year
                name={'year'}
                label={'年度'}
                rules={[{ required: true, message: '请输入' }]}
              />
              <ProFormDigit
                name={'yearFund'}
                label={'到校款金额(万元)'}
                rules={[{ required: true, message: '请输入' }]}
              />
            </ModalForm> */}
          </Space>
        }
        width={'30%'}
      >
        <ProTable
          columns={columnsYearFoundList}
          dataSource={yearFundData}
          search={false}
          size={'small'}
          rowKey={'tableKey'}
          toolBarRender={false}
          pagination={false}
        />
      </Modal>
    </PageContainer>
  );
};
